<template>
	<view class="improveInfo-container">
		<view class="header">
			<!-- 业主审核界面 -->
		</view>
		<view class="list-box">
			<view 
				class="list-item" 
				@click="clickListItem(index)"
				v-for="(item,index) in listBox" 
				:key="item.id">
				<view class="left">
					{{item.name}}
				</view>
				<view class="right">
					<text>{{item.info}}</text>
					<text class="iconfont icon-icon-test61"></text>
				</view>
			</view>
		</view>
		<view class="middle_button" @click="sendRequestAu">
			提交审核
		</view>
		<fui-dialog
			:show="dialog.show" 
			:title="dialog.title"
			:content="dialog.content" 
			:buttons="dialog.buttons"
			:maskClosable = "false"
			@click="onTap">
				<input
				class="dialog-input"
				type="text"
				v-if="dialog.inputShow"
				v-model:value="dialog.inputContent" 
				:placeholder="dialog.inputPlaceHolder"/>
				<radio-group v-if="dialog.radioShow" @change="genderRadio">
					<label class="radio">
						<radio value="男" color="#0041da" /><text>男</text>
					</label>
					<label class="radio">
						<radio value="女" color="#0041da" /><text>女</text>
					</label>
				</radio-group>
		</fui-dialog>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				houseOwnerInfo:{
					signKey: '',
					houseOwnerSignKey: '',
					ownerGender: '',
					ownerIdCard: '',
					ownerName:'',
					ownerPhone:'',
				},
				listBox:[
					{
						id: '1',
						name: '姓名',
						info: '未设置'
					},
					{
						id: '2',
						name: '性别',
						info: '未设置'
					},
					{
						id: '3',
						name: '电话',
						info: '未设置'
					},
					{
						id: '4',
						name: '身份证',
						info: '未设置'
					},
					{
						id: '5',
						name: '身份类型',
						info: '业主'
					},
					{
						id: '6',
						name: '房主密钥',
						info: '未设置'
					}
				],
				userInfo: {
					phone: '',
					signKey: ''
				},
				dialog: {
					show: false,
					title: '自定义对话框',
					content: '自定义对话框内容',
					buttons: [
						{
							text: '取消',
							color: '#FF2B2B'
						},
						{
							text: '确认',
							color: '#0041da'
						}
					],
					methodIndex: -1,
					inputContent: '',
					inputShow: false,
					inputPlaceHolder: '',
					radioShow: false
				},
				filePaths:[]
			};
		},
		onLoad(opt) {
			this.getUserInfo()
			if(opt.homeId != null){
				this.houseOwnerInfo.houseSignKey = opt.homeId
				this.listBox[0].info = opt.homeInfo
			}
		},
		methods: {
			sendRequestAu(){
				this.houseOwnerInfo.ownerPhone = this.userInfo.phone
				this.houseOwnerInfo.signKey = this.userInfo.signKey
				console.log('houserOwnerInfo',this.houseOwnerInfo)
				//提交业主审核申请
				this.$myReq({
					url: '/admin/property/ownerApplication/ownerVerifyByHOSignKey',
					method:'POST',
					data: this.houseOwnerInfo
				})
				.then((res) => {
					uni.showToast({
						title: '信息绑定成功',
						image: '../../../static/Icon/login/infoSuccess.png',
						position:'top'
					})
					setTimeout(()=>{
						uni.switchTab({
							url:'../../index/index'
						})
					},1000)
				})
				.catch((err) => {
					console.log(err)
					this.dialog.show = true
					this.dialog.title = '审核失败'
					this.dialog.content = err.message
				})
			},
			genderRadio(e){
				var gender = e.detail.value
				this.listBox[1].info = gender
				this.houseOwnerInfo.ownerGender = gender
			},
			onTap(res){
				var method = this.dialog.methodIndex
				//当点击确认时
				if(res.index == 1){
					if(method == 1){
						this.listBox[0].info = this.dialog.inputContent
						this.houseOwnerInfo.ownerName = this.dialog.inputContent
						this.dialog.inputContent = ''
						this.dialog.inputShow = false
					}else if(method == 2){
						this.dialog.radioShow = false
					}else if(method == 4){
						this.listBox[3].info = this.dialog.inputContent
						this.houseOwnerInfo.ownerIdCard = this.dialog.inputContent
						this.dialog.inputContent = ''
						this.dialog.inputShow = false
					}else if(method = 5){
						this.listBox[5].info = '已输入'
						this.houseOwnerInfo.houseOwnerSignKey = this.dialog.inputContent
						this.dialog.inputContent = ''
						this.dialog.inputShow = false
					}
					this.dialog.show = false
				}else{
					this.dialog.show = false
					this.dialog.inputShow = false
					this.dialog.radioShow = false
				}

			},
			setName(){
				this.dialog.methodIndex = 1
				this.dialog.show = true
				this.dialog.title = '请输入姓名'
				this.dialog.content = ''
				this.dialog.inputPlaceHolder = '在此输入姓名'
				this.dialog.inputShow = true
			},
			setGender(){
				this.dialog.methodIndex = 2
				this.dialog.show = true
				this.dialog.title = '选择您的性别'
				this.dialog.content = ''
				this.dialog.radioShow = true
			},
			setIdCard(){
				this.dialog.methodIndex = 4
				this.dialog.show = true
				this.dialog.title = '请输入身份证'
				this.dialog.content = ''
				this.dialog.inputPlaceHolder = '在此输入身份证'
				this.dialog.inputShow = true
			},
			setHouseOwnerSignKey(){
				this.dialog.methodIndex = 5
				this.dialog.show = true
				this.dialog.title = '请输入房主密钥'
				this.dialog.content = ''
				this.dialog.inputPlaceHolder = '请在此输入密钥'
				this.dialog.inputContent = this.houseOwnerInfo.houseOwnerSignKey
				this.dialog.inputShow = true
			},
			clickListItem(index){
				if(index === 0){
					this.setName()
				}else if(index === 1){
					this.setGender()
				}else if(index === 3){
					this.setIdCard()
				}else if(index === 5){
					this.setHouseOwnerSignKey()
				}
			},
			getUserInfo(){
				var token = uni.getStorageSync("userToken")
				this.$myReq({
					url: '/owner/login/loginUserInfo/' + token,
					method:'GET'
				})
				.then((res) => {
					this.userInfo = res.data
					this.listBox[2].info = this.userInfo.phone
				})
			}
		}
	}
</script>

<style lang="scss">
	.header{
		padding: 5rpx;
		text-align: center;
		background: white;
	}
	.list-box{
		padding: 0rpx 30rpx 0rpx 30rpx;
		background: #ffffff;
		.list-item{
			border-bottom: 1px solid #dddddd;
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			width: 100%;
			height: 80rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.left{
				height: 100%;
				line-height:80rpx;
				font-size: 35rpx;
			}
			.right{
				height: 100%;
				// width: 30%;
				line-height: 80rpx;
				text{
					margin-right: 30rpx;
					font-size: 30rpx;
					color: #515151;
				}
				text:nth-child(2){
					margin-right: 20rpx
				}
				
			}
		}
	}
	.middle_button{
		margin: 0 auto;
		margin-top: 100rpx;
		margin-bottom: 20rpx;
		width: 600rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		border-radius: 20rpx;
		color: white;
		font-size: 35rpx;
		background: $main-colorB;
	}
	.dialog-input{
		margin-top: 30rpx;
		margin-bottom: -20rpx;
		line-height: 80rpx;
		height: 80rpx;
		font-size: 40rpx;
		border-bottom: 2px solid #787878;
	}
	radio-group{
		// border: 1px solid black;
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.radio{
			// border: 1px solid red;
			width: 49%;
			radio{
				color: #18BC37;
				transform: scale(0.9);
			}
			text{
				font-size: 40rpx;
			}
		}
	}
</style>
